<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Language" content="en" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test for ""</title>
	
	<style type="text/css" media="all">
	
	body {
		background: #fff;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-size: 12px;
	}
	
	.dropzone {
		background: #bbb;
	}
	
	.target {
		border: 2px dotted black;
	}
	
	.placeholder {
		background: blue;
	}
	
	.active {
		border: 2px solid black;
	}
	
	.hover {
		background: green !important;
	}
	
	#draggable {
		width: 200px;
		height: 100px;
		background: red;
		margin: 20px;
	}
	
	#droppable {
		width: 200px;
		height: 100px;
		background: green;
		margin: 20px;
	}
	
	</style>

	<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

	<script type="text/javascript" src="../ui.core.js"></script>
	<script type="text/javascript" src="../ui.draggable.js"></script>
	<script type="text/javascript" src="../ui.droppable.js"></script>
	<script type="text/javascript" src="../ui.sortable.js"></script>
	<script type="text/javascript" src="../ui.resizable.js"></script>
	<script type="text/javascript" src="../ui.slider.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
	
		$("#draggable").draggable({ revert: false });
		$("#droppable").droppable({ accept: "#draggable", hoverClass: "active", drop: function(e, ui) {
			console.log("dropped!");
			//$.data(ui.draggable[0], "ui-draggable").options.revert = false;
		} });
	
	});
	
	function drop() {
		var droppable = $.data($("#droppable")[0], "droppable"); // Get the droppable's instance
		var draggable = $.data($("#draggable")[0], "draggable"); // Get the draggable's instance
		droppable.drop(null, draggable);
	}
		
	</script>
</head>
<body>

		<div id="draggable">
			Draggable
		</div>
		
		<div id="droppable">
			Droppable
		</div>
		
		<button onclick="drop()">Drop #draggable on #droppable</button>



</body>
</html>

